<template>
  <div class="edit-box">
    <el-form label-width="120px" class="form-grid" :model="formData">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="申请ID"><el-input v-model="formData.id" readonly /></el-form-item>
          <el-form-item label="姓名"><el-input v-model="formData.real_name" readonly /></el-form-item>
          <el-form-item label="电话"><el-input v-model="formData.tel" readonly /></el-form-item>
          <el-form-item label="身份证号"><el-input v-model="formData.id_card_number" readonly /></el-form-item>

          <el-row :gutter="20" class="td-fix">
            <el-col :span="6">
              <el-form-item label="主体类型">
                <el-tag
                  :type="PRINCIPAL_TYPE[String(formData.principal_type)] && PRINCIPAL_TYPE[String(formData.principal_type)].type"
                  disable-transitions>
                  <i :class="PRINCIPAL_TYPE[String(formData.principal_type)] && PRINCIPAL_TYPE[String(formData.principal_type)].icon"
                    style="margin-right: 4px" />
                  {{ PRINCIPAL_TYPE[String(formData.principal_type)] ? PRINCIPAL_TYPE[String(formData.principal_type)].text : '未知' }}
                </el-tag>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="工作性质">
                <el-tag
                  :type="NATUREOFWORK[String(formData.nature_of_work)] && NATUREOFWORK[String(formData.nature_of_work)].type"
                  disable-transitions>
                  <i :class="NATUREOFWORK[String(formData.nature_of_work)] && NATUREOFWORK[String(formData.nature_of_work)].icon"
                    style="margin-right: 4px" />
                  {{ NATUREOFWORK[String(formData.nature_of_work)] ? NATUREOFWORK[String(formData.nature_of_work)].text : '未知' }}
                </el-tag>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="服务状态">
                <el-tag
                  :type="SERVICE_STATUS[String(formData.service_status)] && SERVICE_STATUS[String(formData.service_status)].type"
                  disable-transitions>
                  <i :class="SERVICE_STATUS[String(formData.service_status)] && SERVICE_STATUS[String(formData.service_status)].icon"
                    style="margin-right: 4px" />
                  {{ SERVICE_STATUS[String(formData.service_status)] ? SERVICE_STATUS[String(formData.service_status)].text : '未知' }}
                </el-tag>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="学历">
                <el-tag :type="EDUCATION[String(formData.education)] && EDUCATION[String(formData.education)].type"
                  disable-transitions>
                  <i :class="EDUCATION[String(formData.education)] && EDUCATION[String(formData.education)].icon"
                    style="margin-right: 4px" />
                  {{ EDUCATION[String(formData.education)] ? EDUCATION[String(formData.education)].text : '未知' }}
                </el-tag>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="工作年限"><el-input v-model="formData.experience_years" readonly /></el-form-item>
          <el-form-item label="所在区域">
            <el-input :value="`${formData.p_title || ''} ${formData.c_title || ''} ${formData.a_title || ''}`"
              readonly />
          </el-form-item>
          <el-form-item label="所在街道"><el-input v-model="formData.t_title" readonly /></el-form-item>

          <el-form-item label="管家姓名"><el-input v-model="formData.manager_real_name" readonly /></el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身份证正面"><el-image :src="$imageFull(formData.card_face)"
              style="height: 80px" /></el-form-item>
          <el-form-item label="身份证国徽"><el-image :src="$imageFull(formData.card_bg)"
              style=" height: 80px" /></el-form-item>

          <el-form-item label="资质"><el-image :src="$imageFull(formData.certification_info)"
              style=" height: 80px" /></el-form-item>
          <el-form-item label="申请时间"><el-input v-model="formData.create_time" readonly /></el-form-item>
          <el-form-item label="审批时间"><el-input v-model="formData.approved_time" readonly /></el-form-item>
          <el-form-item label="审核状态">
            <el-tag
              :type="APPROVAL_STATUS[String(formData.approved_status)] && APPROVAL_STATUS[String(formData.approved_status)].type"
              disable-transitions>
              <i :class="APPROVAL_STATUS[String(formData.approved_status)] && APPROVAL_STATUS[String(formData.approved_status)].icon"
                style="margin-right: 4px" />
              {{ APPROVAL_STATUS[String(formData.approved_status)] ? APPROVAL_STATUS[String(formData.approved_status)].text : '未知状态' }}
            </el-tag>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="审批备注" class="full-width">
        <el-input type="textarea" v-model="remark" :rows="3" placeholder="请输入审批备注..." />
      </el-form-item>

      <el-form-item class="btn-group">
        <el-button type="success" @click="$emit('approve', { id: formData.id, action: 1, remark })">审批通过</el-button>
        <el-button type="danger" @click="$emit('approve', { id: formData.id, action: 2, remark })">拒绝</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import {
    APPROVAL_STATUS,
    SERVICE_STATUS,
    EDUCATION,
    PRINCIPAL_TYPE,
    NATUREOFWORK
  } from '@/constants/statusMap';
  export default {
    name: "ReviewDetail",
    props: {
      formData: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        APPROVAL_STATUS,
        SERVICE_STATUS,
        EDUCATION,
        PRINCIPAL_TYPE,
        NATUREOFWORK,
        remark: ""
      };
    }
  };
</script>

<style scoped>
  .td-fix{padding-bottom: 20px;}
  .edit-box {
    box-sizing: border-box;
    padding: 10px 40px 20px 10px;
  }

  .form-grid .el-form-item {
    margin-bottom: 20px;
  }

  .full-width {
    margin-top: 20px;
  }

  .full-width .el-input {

    width: 100%;
  }

  .btn-group {
    text-align: center;
  }
</style>
